<%- contentFor('heroContent') %>
  <!-- Hero Banner with Search -->
  <div class="hero-banner detail-hero-banner" style="margin-bottom: 30px;">
    <div class="hero-content">
      <div class="search-box-container">
        <form action="/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all">All</option>
              <option value="title">Title</option>
              <option value="author">Author</option>
              <option value="isbn">ISBN(13 digits)</option>
              <option value="publisher">Publisher</option>
            </select>
          </div>
          <input type="text" name="query" placeholder="Type ISBN or title..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="page-container">
    <!-- 左侧出版商列表 -->
    <div class="publisher-sidebar">
      <h3>Publisher Imprints</h3>
      <ul class="publisher-list">
        <li>
          <a href="/books" class="publisher-link <%= !publisher ? 'active' : '' %>">
            All <span class="count">(All)</span>
          </a>
        </li>
        <% if (publisherCounts && publisherCounts.length> 0) { %>
          <% publisherCounts.forEach(function(publisher) { %>
            <li>
              <a href="/books?publisher=<%= encodeURIComponent(publisher.name) %>"
                class="publisher-link <%= (locals.publisher && publisher === publisher.name) ? 'active' : '' %>">
                <%= publisher.name %> <span class="count">(<%= publisher.count %>)</span>
              </a>
            </li>
            <% }); %>
              <% } else { %>
                <li>No publishers found</li>
                <% } %>
      </ul>
    </div>

    <!-- 右侧图书列表 -->
    <div class="book-list-content">
      <div class="book-list-header">
        <h1>Browse all books</h1>
        <p>Discover our collection of books from various publishers and authors.</p>
      </div>


      <!-- <div class="pagination-info">
        <% const total=typeof count !=='undefined' ? count : (books ? books.length : 0); %>
          Showing <%= ((pagination.current - 1) * 10 + 1) %>-<%= total %> of <%= total %> results
      </div> -->

      <!-- 列表视图 -->
      <div class="books-list">
        <% if (books && books.length> 0) { %>
          <% books.forEach(function(book) { %>
            <div class="book-list-item">
              <a href="/books/detail/<%= book.id %>" class="book-list-cover">
                <% if (book.CoverImage) { %>
                  <img src="<%= book.CoverImage %>" alt="<%= book.Title || 'Book Cover' %>">
                  <% } else { %>
                    <img src="/images/img.png" alt="<%= book.Title || 'Book Cover' %>" class="placeholder-image">
                    <% } %>
              </a>
              <div class="book-list-info">
                <div>
                  <h3 class="book-list-title">
                    <a href="/books/detail/<%= book.id %>" style="text-decoration: none; color: inherit;">
                      <%= book.Title || 'Book Title' %>
                    </a>
                  </h3>
                  <p class="book-list-author">
                    <%= book.Authors || 'Unknown' %>
                  </p>
                  <p class="book-list-publisher">
                    <%= book.Publisher || 'Unknown' %>
                  </p>
                </div>
              </div>
            </div>
            <% }); %>
              <% } else { %>
                <p class="no-data">
                  <% if (publisher) { %>
                    No books available for publisher "<%= publisher %>"
                      <% } else if (category) { %>
                        No books available in category "<%= category.charAt(0).toUpperCase() + category.slice(1) %>"
                          <% } else { %>
                            No book data available
                            <% } %>
                </p>
                <% } %>
      </div>

      <div class="pagination">
        <!-- <div class="pagination-info">
        <% const total2 = typeof count !== 'undefined' ? count : (books ? books.length : 0); %>
          Showing <%= ((pagination.current - 1) * 10 + 1) %>-<%= Math.min(pagination.current * 10, total2) %> of <%= total2 %> results
      </div> -->
        <div class="pagination-controls">
          <% if (pagination.hasPrev) { %>
            <a href="/books?page=1<%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
              class="pagination-btn">First</a>
            <a href="/books?page=<%= pagination.current - 1 %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
              class="pagination-btn">&laquo;</a>
            <% } %>

              <% let startPage=Math.max(1, pagination.current - 2); let endPage=Math.min(pagination.total,
                pagination.current + 2); %>
                <% if (startPage> 1) { %>
                  <a href="/books?page=1<%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                    class="pagination-btn">1</a>
                  <% if (startPage> 2) { %>
                    <span class="pagination-ellipsis">...</span>
                    <% } %>
                      <% } %>

                        <% for(let i=startPage; i <=endPage; i++) { %>
                          <a href="/books?page=<%= i %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                            class="pagination-btn <%= i === pagination.current ? 'active' : '' %>">
                            <%= i %>
                          </a>
                          <% } %>

                            <% if (endPage < pagination.total) { %>
                              <% if (endPage < pagination.total - 1) { %>
                                <span class="pagination-ellipsis">...</span>
                                <% } %>
                                  <a href="/books?page=<%= pagination.total %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                    class="pagination-btn">
                                    <%= pagination.total %>
                                  </a>
                                  <% } %>

                                    <% if (pagination.hasNext) { %>
                                      <a href="/books?page=<%= pagination.current + 1 %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                        class="pagination-btn">&raquo;</a>
                                      <a href="/books?page=<%= pagination.total %><%= category ? '&category=' + category : '' %><%= publisher ? '&publisher=' + encodeURIComponent(publisher) : '' %><%= search ? '&search=' + encodeURIComponent(search) : '' %>"
                                        class="pagination-btn">Last</a>
                                      <% } %>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* ... existing styles ... */
    /* .publisher-sidebar 和 .publisher-list 样式已移至style.css */
    /* ... existing styles ... */
  </style>
